<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="central/include :: header('修改物料')" />
    <th:block th:include="include::editable-select-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-centralMaterial-edit" th:object="${topCentralMaterial}">
            <input name="id" th:field="*{id}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">物料唯一编码：</label>
                <div class="col-sm-8">
                    <input th:field="*{id}"  class="form-control" disabled="disabled" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">物料批次号：</label>
                <div class="col-sm-8">
                    <select name="batchNo"  disabled="disabled" class="form-control m-b" required>
                    </select>
<!--                    <input name="batchNo" th:field="*{batchNo}" disabled class="form-control" type="text" required>-->
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">物料类型：</label>
                <div class="col-sm-8">
                    <select name="typeId" onchange="typeIdChange(this)" class="form-control m-b" required>
                    </select>
<!--                    <input name="typeId" onchange="typeIdChange(_this)" th:value="${topCentralMaterial.materialType.name}" type="text" class="form-control m-b" disabled required>-->
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">初始操作站点：</label>
                <div class="col-sm-8">
                    <select name="operationStationId" class="form-control m-b" required>
                        <option value="">请先选择物料类型</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">合成物料：</label>
                <div class="col-sm-8">
                    <select name="parentTypeId" class="form-control m-b" required>
                        <option value="">请先选择物料类型</option>
                    </select>
                </div>
            </div>
            <!--       物料所属的根产品类     -->
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">物料所属：</label>
                <div class="col-sm-8">
                    <select name="productTypeId" class="form-control m-b" required>
                    </select>
<!--                    <input th:value="${rootProduct.name}" class="form-control" disabled type="text" required>-->
                </div>
            </div>
            <!--       物料绑定的工艺     -->
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">工艺编号：</label>
                <div class="col-sm-8">
                    <select name="artProcessId" class="form-control m-b" required>
                        <option value="">请先选择物料类型</option>
                    </select>
                </div>
            </div>

            <div class="form-group">    
                <label class="col-sm-3 control-label">状态：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('data_normal_disable')}">
                        <input type="radio" th:id="${'state_' + dict.dictCode}" name="state" th:value="${dict.dictValue}" th:field="*{state}">
                        <label th:for="${'state_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">描述：</label>
                <div class="col-sm-8">
                    <textarea name="remark" class="form-control">[[*{remark}]]</textarea>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="central/include :: footer" />
    <th:block th:include="include :: editable-select-js" />
    <th:block th:include="central/include :: import-js('centralArtProcess')"/>
    <th:block th:include="central/include :: import-js('centralProductTypeOperationStation')"/>
    <script th:inline="javascript">
        var prefix = ctx + "central/centralMaterial";

        const batchNoSet = new Set();

        $("#form-centralMaterial-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operation.update(prefix, $.common.formToJSON());
            }
        }

        /**/
        $(function(){
            loadMaterialBatchNoData();

            loadMaterialListOfPark();

            getListByProductTypeId([[${topCentralMaterial.typeId}]]);

            loadMaterialListOfFinishedProduct();

            loadArtProcess([[${topCentralMaterial.typeId}]]);

            getParentMaterialTypeList([[${topCentralMaterial.typeId}]],[[${topCentralMaterial.parentTypeId}]])
        })

        /*加载产品物料列表*/
        function loadMaterialListOfFinishedProduct(){
            $.productTypeBusiness.getSimpleListOfFinishedProduct({$select:$("[name=productTypeId]"),selectValue:[[${topCentralMaterial.productTypeId}]]})
        }

        /*加载零件物料列表*/
        function loadMaterialListOfPark(){
            $.productTypeBusiness.getSimpleListOfPart({$select:$("[name=typeId]"),selectValue:[[${topCentralMaterial.typeId}]]})
        }

        /*根据产品类型编号获取 站位列表*/
        function getListByProductTypeId(productTypeId){
            $.productTypeOperationStationBusiness.getListByProductTypeId({$select:$("[name=operationStationId]"),selectValue:[[${topCentralMaterial.operationStationId}]]},productTypeId)
        }

        /*加载物料批次号列表*/
        function loadMaterialBatchNoData(){
            const $batchNo = $("[name=batchNo]")
            $.materialBusiness.getDistinctMaterialBatchNoList({$select:$batchNo,selectValue:[[${topCentralMaterial.batchNo}]]},null,(res)=>{
                //使用可编辑的下拉框插件
                $batchNo.on('select.editable-select', function (e) {
                    const $this = $(e.currentTarget)
                    const selectedBatchNo = $this.val()
                    if(!batchNoSet.has(selectedBatchNo)){
                        batchNoSet.clear()
                        batchNoSet.add(selectedBatchNo)
                        onSelect(selectedBatchNo)
                    }
                }).editableSelect()
            })
        }
        function typeIdChange(_this){
            const typeId = $(_this).val();
            if(typeId){
                loadArtProcess(typeId)
                getListByProductTypeId(typeId)
            }else{
                const $artProcessId = $('[name=artProcessId]');
                $artProcessId.empty()
                $artProcessId.append('<option value="">请先选择物料类型</option>')

                const $operationStationId = $('[name=operationStationId]');
                $operationStationId.empty()
                $operationStationId.append('<option value="">请先选择物料类型</option>')

                const $parentTypeId = $("[name=parentTypeId]")
                $parentTypeId.empty()
                $parentTypeId.append('<option value="">请先选择物料类型</option>')
            }

        }

        //获取父级物料类型
        function getParentMaterialTypeList(materialTypeId,parentMaterialTypeId){
            $.productTypeBusiness.getParentMaterialTypeList({$select:$("[name=parentTypeId]"),fillDefault:false,name:'name',value:'id',selectValue:parentMaterialTypeId},materialTypeId)
        }

        function loadArtProcess(typeId){
            $.artProcessBusiness.getSimpleListByProductTypeId({$select:$('[name=artProcessId]'),fillDefault:false},typeId)
        }
        //当物料批次号列表发生改变业务处理方法
        function onSelect(batchNo){

            const $productTypeId = $("[name=productTypeId]")

            if($.common.isEmpty(batchNo)){
                $productTypeId.attr("readonly",false)
                return
            }
            // if($productTypeId[0].length == 1){
            //     return
            // }

            $.centralProductBusiness.findRoot(batchNo)
                .then(res=>{
                    if(res.data){
                        const data = res.data
                        const productTypeId = data.typeId
                        const productTypes = data.productTypes

                        $.selectComponent.selected({$select:$productTypeId,selectValue:productTypeId})

                        if(productTypes && Array.isArray(productTypes)){
                            $.selectComponent.init({$select:$("[name=typeId]"),data:productTypes,name:'name',value:'id'})
                        }


                        $productTypeId.attr("readonly",true)
                    }else{
                        $productTypeId.attr("readonly",false)
                    }
                })
        }

    </script>
</body>
</html>